<template>
	<div
		:class="`pf-Spin pf--type-${type}`"
		:style="{
			fontSize:toCssLength(size),
			color,
		}"
	>
		<div
			v-if="type==='tail'"
		>
			<svg
				focusable="false"
				viewBox="0 0 24 24"
				aria-hidden="true"
			>
				<defs>
					<linearGradient
						:id="id"
						x1="8.042%"
						y1="0%"
						x2="65.682%"
						y2="23.865%"
					>
						<stop
							stop-color="currentColor"
							stop-opacity="0"
							offset="0%"
						/>
						<stop
							stop-color="currentColor"
							stop-opacity=".631"
							offset="63.146%"
						/>
						<stop
							stop-color="currentColor"
							offset="100%"
						/>
					</linearGradient>
				</defs>
				<path
					:stroke="stroke"
					d="M22 12a10 10 0 0 0 -10 -10"
				/>
			</svg>
		</div>
		<div v-else-if="type==='circle'">
			<svg
				focusable="false"
				viewBox="0 0 24 24"
				aria-hidden="true"
			>
				<circle
					cx="12"
					cy="12"
					r="10"
				/>
				<path
					d="M22 12a10 10 0 0 0 -10 -10"
				/>
			</svg>
		</div>
		<template v-else>
			<div/>
			<div/>
			<div/>
			<div/>
			<div/>
		</template>
	</div>
</template>

<script setup lang="ts">
import type {SpinType} from './type';
import {toCssLength,getUid} from '../../../util';
/**
 * 加载图标组件
 * @author 唐国雄
 * @date 2022/8/26
 * 属性----------------------
 * :color	颜色, string
 * :size	大小, string | number
 * :type	类型, SpinType
 */
withDefaults(defineProps<{
	color?:string;
	size?:string|number;
	type?:SpinType;
}>(),{
	type:'circle',
});
const id='def'+getUid();
const stroke=`url(#${id})`;
</script>

<script lang="ts">
export default {};
</script>